<template>
  <div class="p-4 sm:p-6 bg-white shadow rounded">
    <dt class="text-black" @click="isShow = !isShow">
      <button
        id="headlessui-disclosure-button-3"
        type="button"
        aria-expanded="true"
        class="w-full flex justify-between items-start text-gray-400"
        aria-controls="headlessui-disclosure-panel-4"
      >
        <span class="text-sm sm:text-base text-left">{{ title }}</span
        ><span class="ml-6 h-7 flex items-center"
          ><svg
            xmlns="http://www.w3.org/2000/svg"
            fill="none"
            viewBox="0 0 24 24"
            stroke="currentColor"
            :class="
              isShow
                ? '-rotate-180 h-6 w-6 transform'
                : 'rotate-0 h-6 w-6 transform'
            "
          >
            <path
              stroke-linecap="round"
              stroke-linejoin="round"
              stroke-width="2"
              d="M19 9l-7 7-7-7"
            ></path>
          </svg>
        </span>
      </button>
    </dt>
    <dd
      id="headlessui-disclosure-panel-4"
      class="mt-5 sm:mt-10 sm:pr-12"
      v-show="isShow"
    >
      <pre class="text-sm text-black leading-loose whitespace-pre-line">
       {{ desc }}
      </pre>
    </dd>
  </div>
</template>
<script>
export default {
  data() {
    return {
      isShow: false,
    };
  },
  props: ["title", "desc"],
};
</script>
<style lang="" scoped></style>
